<template>
  <div class="page-content">
    <div class="form">
      <el-row style="display: flex">
        <el-input v-model="form.title" placeholder="输入标题" style="flex: 1"/>
        <el-select v-model="value" placeholder="请选择分类" style="width: 200px; margin-left: 10px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-row>

      <quill-editor
        class="editor"
        ref="quillEditor"
        v-model="content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
      />

      <el-upload 
        class="upload-demo" 
        action="" 
        :before-upload='beforeUpload' 
        :data="uploadData" 
        :headers="headers"
        :on-success='upScuccess'
        ref="upload" 
        style="display:none"
      >
        <el-button 
          type="primary" 
          id="imgInput" 
          v-loading.fullscreen.lock="fullscreenLoading" 
          element-loading-text="插入中,请稍候"
        >
          点击上传
        </el-button>
      </el-upload>

      <el-row style="margin-top: 20px">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-row>

      <el-button type="primary" style="margin-top: 15px" @click="submit()">发布</el-button>
    </div>
  </div>
</template>

<script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import '@styles/quill.scss'
  
  export default {
    components: {
      quillEditor
    },
    data () {
      return {
        uploadData: {},
        content: '',
        headers: {
          Authorization: ''
        },
        editorOption: {
          placeholder: ''
        },
        form: {
          title: '',
          cover: ''
        },
        options: [{
          value: '选项1',
          label: 'Vue'
        }, {
          value: '选项2',
          label: 'React'
        }],
        value: '',
        fullscreenLoading: false,
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    mounted() {
      let quill = this.$refs.quillEditor.quill
      // 监听工具栏图片点击
      quill.getModule('toolbar').addHandler('image', this.imgHandler)
    },
    methods: {
      imgHandler(state) {
        let quill = this.$refs.quillEditor.quill

        this.addRange = quill.getSelection()
        if (state) {
          let fileInput = document.getElementById('imgInput')
          fileInput.click() // 加一个触发事件
        }
        this.uploadType = 'image'
      },
      submit() {

      },
      beforeUpload() {

      },
      upScuccess(e) {
        let { path } = e.data
        let url = '' + path
        let quill = this.$refs.quillEditor.quill
        let selection = quill.getSelection()

        // 获取光标的位置
        let cursorIndex = selection ? selection.index : 0
        // 插入图片到编辑器
        quill.insertEmbed(cursorIndex, 'image', url)
        // 调整光标到最后
        quill.setSelection(cursorIndex+1)
      },
      onEditorBlur(quill) {
        
      },
      onEditorFocus(quill) {
        
      },
      onEditorReady(quill) {
        
      },
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },
    computed: {
      editor() {
        return this.$refs.quillEditor.quill
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-content {

    .form {
      max-width: 750px;

      .editor {
        margin-top: 15px;

        .ql-editor {
          min-height: 500px;
        }
      }

      /deep/ .el-upload--picture-card {
        width: 220px;
        height: 140px;
      }
    }
  }
</style>